<!--
 @description 订单详情-操作日志
 @fileName LogList.vue
 @author zengqiongying
 @created 2021/07/10 13:36:28
-->
<template>
  <div>
    <table-box
      ref="refTable"
      table-size="mini"
      no-request
      :table-config="tableConfig"
      :other-filters="otherFilters"
      :table-max-height="600"
      :show-custom-setting="true"
      :table-sortable="false"
      show-index
    />
    <!-- 日志详情页 -->
    <log-detail-form v-if="showDetail" ref="formDlg" :visible.sync="showDetail" :detail-data="activeRowData" />
  </div>
</template>

<script>
import tabMixin from './mixin'
import { parseTime } from '@/utils'
import LogDetailForm from './LogDetailForm'
export default {
  name: 'OrderLog',
  components: { LogDetailForm },
  mixins: [tabMixin],
  data() {
    const that = this
    return {
      tableData: [],
      // ECO日志查询公用接口：/ec-log-service/api/v1/operateLog/page
      defualtFilter: [
        { 'id': 'operateModel', 'property': 'operateModel', 'value': '2', 'operator': '=' },
        { 'id': 'operateType', 'property': 'operateType', 'operator': '=', 'value': '1' }
      ], // ECO公共日志查询必传参数
      otherFilters: [], // 表格额外查询条件
      otherRaws: {},
      tableConfig: {
        // interfacePath: `/ec-settle-service/api/v1/log/page/${this.orderData.id}`, // 结算的日志接口
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/orderLog/page`,
        hideSearchBar: true,
        hideFuncBar: true,
        tabIndex: 24,
        buttonGroupCode: 'detail_log',
        pageSize: 10,
        sort: 'createTime',
        order: 'desc',
        setting: [
          {
            prop: 'createBy',
            label: '操作人',
            width: 150
          },
          {
            prop: 'createTime', // TODO：字段待定
            label: '操作时间',
            width: 150,
            formatData: ({ createTime }) => {
              return parseTime(createTime)
            }
          },
          {
            prop: 'operateTypeName',
            label: '操作类型',
            width: 150
          },
          {
            prop: 'context',
            label: '操作内容',
            minWidth: 200
          },
          {
            prop: 'opt',
            label: '操作',
            width: 80,
            render: function(_, rows) {
              return (
              // <div class='elx-cell c--tooltip'>
                <span
                  class='btn-green'
                  onClick={that.handleDetail.bind(this, rows)}>
                  查看详情
                </span>
              // </div>
              )
            }
          }
        ],
        btnList: []
      },
      showDetail: false, // 详情页标识
      activeRowData: ''
    }
  },
  computed: {

  },
  created() {
    this.otherFilters = [
      // ...this.defualtFilter,
      ...[{ id: 'sourceId', property: 'sourceId', operator: '=', value: this.orderId }]
    ]
    // this.tableConfig.interfacePath = `/ec-settle-service/api/v1/log/page/${this.orderData.id}`
  },
  methods: {
    initData() {
      this.tableData = (this.orderData && this.orderData.logList) || []
      this.otherFilters = [
        // ...this.defualtFilter,
        ...[{ id: 'sourceId', property: 'sourceId', operator: '=', value: this.orderId }]
      ]
      // this.tableConfig.interfacePath = `/ec-settle-service/api/v1/log/page/${this.orderData.id}`
      this.$nextTick(() => {
        this.$refs.refTable.initTableData()
      })
    },
    // 查看详情
    handleDetail(row) {
      this.showDetail = true
      this.activeRowData = row
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
